<template>
    <el-container direction="vertical">
        <el-form :model="userForm" :rules="rules" ref="userForm" label-width="auto" class="demo-ruleForm userForm">
            <el-form-item label="姓名" prop="userName">
                <el-input v-model="userForm.userName" clearable placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" clearable show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="role">
                <el-select v-model="userForm.role" placeholder="请选择身份" style="width: 100%">
                    <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="userForm.sex" placeholder="请选择性别" style="width: 100%">
              <el-option
                v-for="item in sex"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="userForm.age" clearable placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="住址" prop="address">
            <el-input type="textarea" v-model="userForm.address" clearable show-password placeholder="请输入住址"></el-input>
          </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')">添加</el-button>
                <el-button @click="resetForm('userForm')">重置</el-button>
                <el-button type="info" @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script>
import Qs from 'qs'
export default {
  name: "AddUserPage",
  data(){
    return{
      roles:[
        {id:1,name:'管理员'},
        {id:2,name:'学生'},
        {id:3,name:'食堂'}
      ],
      sex:[
        {id:1,name:'男'},
        {id:2,name:'女'},
        {id:3,name:'未知'}
      ],
      userForm:{},
      rules:{
        userName:[
          { required:true,message:'姓名不能为空',trigger:'blur'}
        ],
        password:[
          { required:true,message:'密码不能为空',trigger:'blur'},
          { min:5,max:15,message:'密码长度必须在5-15位之间',trigger:'blur'}
        ],
        role:[
          { required:true,message:'身份不能为空',trigger:'blur'},
        ]
      }
    }
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Qs.stringify(this.userForm);
          this.$http.post('/user/add',params).then((response)=>{
            if(response.status === 200){
              if(response.data.code === 10000){
                this.$notify({
                  title: '成功',
                  message: "您的用户ID是"+response.data.data.id,
                  duration: 1000
                })
                this.userForm = {};
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText,
                duration: 1000
              });
            }
          })
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
